<template>
    <div class="an-user-page">

      <x-header class="head-gree">定位</x-header>

      <div style="height: 350px; overflow: hidden;">
        <div id="map" style="height: 350px; width: 100%; ">地图加载中...</div>
      </div>

      <box gap="15px 10px">
        <p>当前位置：{{address}}</p>
        <x-button type="primary" @click.native="OnClickseav">确定</x-button>
      </box>

      <box gap="15px 10px">
        <x-button type="primary" @click.native="OnClickLin">路线规划</x-button>
      </box>

      <div style="position: absolute; top: 0; bottom: 51px; left: 0;right: 0;" v-if="url">
        <iframe :src="url" width="100%" height="100%" frameborder="0" scrolling="auto" ></iframe>
      </div>

    </div>
</template>

<script>
  import { Box,XButton,XHeader  } from 'vux'
  import {isEmptyValue} from '@/utils/auth'
  import store from '../../store'
    export default {
        name: "map-address",
      components: {
        Box,
        XButton,
        XHeader,
      },
      data(){
        return{
          address:'',
          map:null,
          em:null,
          latitude:'',// 当前纬度，
          longitude:'',  //当前经度
          url:'', //路径规划请求地址
        }
      },
      mounted(){
        if(window.plus){
          this.lound();
        }
        this.getGeocode();
      },
      methods:{
        getGeocode(){
          let _this = this;
          //alert( "获取定位位置信息:" );
          if(window.plus){
            plus.geolocation.getCurrentPosition( _this.geoInf, function ( e ) {
              alert( "获取定位位置信息失败：" );
              alert(JSON.stringify(e));
            },{geocode:true});
          }

        },
        geoInf( position ) {
          alert(JSON.stringify(position));
          var str = "";
          str += "地址："+position.addresses+"\n";//获取地址信息
          str += "坐标类型："+position.coordsType+"\n";
          var codns = position.coords;//获取地理坐标信息；
          var lat = codns.latitude;//获取到当前位置的纬度；
          str += "纬度："+lat+"\n";
          var longt = codns.longitude;//获取到当前位置的经度
          str += "经度："+longt+"\n";
          var alt = codns.altitude;//获取到当前位置的海拔信息；
          str += "海拔："+alt+"\n";

          this.latitude = lat;
          this.longitude = longt;
          this.address = position.addresses;

        },
        lound(){
          this.em = document.getElementById("map");
          let pcenter = new plus.maps.Point(116.3974357341,39.9085574220);
          let map ;
          let _this = this;
          setTimeout(function(){
            map=new plus.maps.Map("map");
            map.centerAndZoom(pcenter,12);  //设置地图初始中心点和缩放级别
            _this.map = map;

            _this.userLocation();
          },300);
        },
        userLocation(){
          let map = this.map;
          map.showUserLocation( true );  //显示当前用户位置信息
          map.getUserLocation(function(state,pos){ //获取用户当前位置信息
            if(0==state){
              map.setCenter(pos);  //设置地图的中心点
            }
          });
          this.map = map;
        },
        OnClickseav(){
          if(!isEmptyValue(this.address)){
            store.commit('SET_ADDRESS', this.address);
          }
          this.$router.go(-1);
        },
        OnClickLin(){  //路线规划

          this.mapclose();

          let start = this.longitude + ','+this.latitude;  //起始地
          let dest = '116.481488,39.990464';
          let destName = '目的地';
          let key = '77f081b7dd74a5ec615dd9da0f777d59';  //web端 key
          let mapurl = 'https://m.amap.com/navi/?start='+start+'&dest='+dest+'&destName='+destName+'&key='+key;
          this.url = mapurl;

        },
        mapclose(){
          let map = this.map;
          if(!isEmptyValue(map)){
            map.hide();
          }
        }

      },
      destroyed(){  //组件退出时执行函数
        this.mapclose();
      }
    }


</script>

<style scoped>

</style>
